<template>
	<div class="authorization">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<!-- 菜单权限 -->
				<div class="title"><span>{{ $t('text.permissionMenu') }}</span></div>
				<div class="menuContent" :style="{ height: `calc(${h} - 100px)` }">
					<div class="headerList">
						<div class="title">
							<ul>
								<li>
									<el-checkbox v-model="checkedAll" @change="getCheckedAll">{{ $t('text.modules') }}</el-checkbox>
								</li>
								<li>{{ $t('text.menu') }}</li>
								<li>{{ $t('text.button') }}</li>
							</ul>
						</div>
					</div>
					<!-- 内容 -->
					<div class="contentList">
						<div v-for="(item, index) in menuAuthList" :key="index" class="item">
							<div class="left">
								<el-checkbox v-model="item.checked" :label="item.name" border
									@change="selectModule(item.checked, item.id)" />
							</div>
							<div class="right">
								<div v-for="(itemMenu, indexMenu) in item.children" :key="indexMenu" class="box">
									<div class="menuList">
										<el-checkbox v-model="itemMenu.checked" :label="itemMenu.name" border
											@change="selectMenu(item.id, itemMenu.checked, itemMenu.id)" />
									</div>
									<div class="btnList">
										<template v-for="(itemBtn, indexBtn) in itemMenu.buttons">
											<el-checkbox :key="indexBtn" v-model="itemBtn.checked" :label="itemBtn.name" border
												@change="selectBtn(item.id, itemMenu.id, itemBtn.checked, itemBtn.id)" />
										</template>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
					<el-button type="primary" @click="authSubmit" v-loading.fullscreen.lock="fullscreenLoading">{{
						$t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { getPowersData, setUserraddMenus } from '@/api/system-manager'
export default {
	name: 'Authorization',
	components: {},
	data() {
		return {
			menuAuthList: [], // 菜单权限
			h: '100%',
			loadingData: false,
			id: '', // 用户id
			checkedAll: false,
			fullscreenLoading: false,
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	watch: {
		menuAuthList: {
			handler(val) {
				this.checkedAll = false
				if (val) {
					var list = val
					var a = [] // 模块状态空数组
					list.filter(item => {
						a.push(item.checked)
					})
					// 查找 模块列表状态 是否存在 false  存在 不操作全选状态  反之
					var b = a.find(function (value) {
						return value === false
					})
					if (b === false) {
						this.checkedAll = false
					} else {
						this.checkedAll = true
					}
				}
			},
			deep: true
		}
	},
	mounted() {
		window._vm = this
		this.resetForm('info') // 重置表单
		if (this.$route.query.id) {
			this.id = this.$route.query.id
			this.init()
		}
	},
	created() { },

	activated() { },
	destroyed() { },
	methods: {
		// 重置表单
		resetForm(vaid) {
			if (this.$refs[vaid] !== undefined) {
				this.$nextTick(() => {
					this.$refs[vaid].resetFields()
				})
			}
		},
		// 操作功能
		init() {
			this.checkedAll = false
			this.menuAuthList = []
			this.getmenuAuthList(this.id) // 菜单权限
		},
		// 菜单权限
		getmenuAuthList(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.loadingData = true
			getPowersData(id)
				.then(res => {
					if (res.code === 200) {
						this.menuAuthList = res.data
						this.loadingData = false
						loading.close()
					}
				})
				.catch(err => {
					loading.close()
				})
		},

		// 权限
		getCheckedAll() {
			var list = this.menuAuthList
			for (var i = 0; i < list.length; i++) {
				list[i].checked = this.checkedAll
				var menuList = list[i].children
				if (menuList.length > 0) {
					for (var j = 0; j < menuList.length; j++) {
						menuList[j].checked = this.checkedAll
						var btnList = menuList[j].buttons
						for (var t = 0; t < btnList.length; t++) {
							btnList[t].checked = this.checkedAll
						}
					}
				}
			}
			this.menuAuthList = list
		},
		// 菜单权限 选中模块
		selectModule(flag, id) {
			var list = this.menuAuthList
			var a = [] // 菜单状态空数组
			list.filter(item => {
				a.push(item.checked)
			})
			// 查找 菜单列表状态 是否存在 true  存在 不操作模块状态  反之 对象模块 按按 状态为false
			var b = a.find(function (value) {
				return value === false
			})
			if (!b) {
				this.checkedAll = false
			} else {
				this.checkedAll = true
			}
			for (var i = 0; i < list.length; i++) {
				if (list[i].id === id) {
					list[i].checked = flag
					var menuList = list[i].children
					if (menuList.length > 0) {
						for (var j = 0; j < menuList.length; j++) {
							menuList[j].checked = flag
							var btnList = menuList[j].buttons
							for (var t = 0; t < btnList.length; t++) {
								btnList[t].checked = flag
							}
						}
					}
				}
			}
			this.menuAuthList = list
		},
		// 菜单权限 选中菜单
		selectMenu(menuId, flag, id) {
			var list = this.menuAuthList
			for (var i = 0; i < list.length; i++) {
				if (list[i].id === menuId) {
					if (!list[i].checked) {
						list[i].checked = true
					}
					var menuList = list[i].children
					var a = [] // 菜单状态空数组
					menuList.filter(item => {
						a.push(item.checked)
					})
					// 查找 菜单列表状态 是否存在 true  存在 不操作模块状态  反之 对象模块 按按 状态为false
					var b = a.find(function (value) {
						return value === true
					})
					// 菜单选中状态 都为空
					if (!b) {
						list[i].checked = false
						if (menuList.length > 0) {
							for (var j = 0; j < menuList.length; j++) {
								if (menuList[j].id === id) {
									var btnList = menuList[j].buttons
									for (var t = 0; t < btnList.length; t++) {
										btnList[t].checked = flag
									}
								}
							}
						}
						return
					} else {
						if (menuList.length > 0) {
							for (var j = 0; j < menuList.length; j++) {
								if (menuList[j].id === id) {
									var btnList = menuList[j].buttons
									for (var t = 0; t < btnList.length; t++) {
										btnList[t].checked = flag
									}
								}
							}
						}
					}
				}
			}
			this.menuAuthList = list
		},
		// 菜单权限 选中按钮
		selectBtn(moduleId, menuId, flag, id) {
			// console.log(moduleId, menuId, flag, id)
			var list = this.menuAuthList
			for (var i = 0; i < list.length; i++) {
				if (moduleId === list[i].id) {
					if (!list[i].checked) {
						list[i].checked = true
					}
					var menuList = list[i].children
					for (var j = 0; j < menuList.length; j++) {
						if (menuList[j].id === menuId) {
							if (!menuList[j].checked) {
								menuList[j].checked = true
							}
							var btnList = menuList[j].buttons
							for (var t = 0; t < btnList.length; t++) {
								if (id === btnList[t].id) {
									btnList[t].checked = flag
								}
							}
						}
					}
				}
			}
		},
		// 菜单权限 选中表头
		selectHeader(moduleId, menuId, flag, id) {
			var list = this.menuAuthList
			for (var i = 0; i < list.length; i++) {
				if (moduleId === list[i].id) {
					if (!list[i].checked) {
						list[i].checked = true
					}
					var menuList = list[i].children
					for (var j = 0; j < menuList.length; j++) {
						if (menuList[j].id === menuId) {
							if (!menuList[j].checked) {
								menuList[j].checked = true
							}
						}
					}
				}
			}
		},
		// 提交权限
		authSubmit() {
			this.fullscreenLoading = true
			var params = {
				userId: this.id, //角色Id
				menuList: this.menuAuthList, //用户菜单权限
			}
			setUserraddMenus(params)
				.then(res => {
					if (res.code === 200) {
						this.$message({
							showClose: true,
							message: this.$t('text.operationSucceedTip'),
							type: 'success'
						})
						this.fullscreenLoading = false
						this.getCancle()
					}
				})
				.catch(err => {
					this.fullscreenLoading = false
				})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.authorization {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;

			&>.title {
				position: relative;
				margin-bottom: 10px;

				&>span {
					margin-left: 20px;
					color: #333333;
					font-size: 16px;
					font-weight: 500;
				}
			}

			&>.title::before {
				content: '';
				display: block;
				width: 5px;
				height: 18px;
				background-color: #d8b581;
				position: absolute;
				left: 0;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}

			&>.footerBtn {
				display: flex;
				justify-content: center;
				padding-top: 20px;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
.menuContent {
	width: 100%;
	height: calc(100% - 230px);
	overflow: hidden;
	position: relative;

	&>.headerList {
		width: 100%;
		height: 40px;
		line-height: 38px;
		background: #f2f2f2;
		position: absolute;
		top: 0;

		&>.title ul {
			color: #333333;
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			box-sizing: border-box;
			color: #909399;
			font-weight: 600;

			&>li {
				flex: 1;
				text-align: center;
				border: 1px solid #dfe6ec;
				border-left: none;
			}

			&>li:first-child,
			li:nth-child(2) {
				flex: initial;
				flex-grow: 0;
				flex-shrink: 0;
				width: 240px;
			}

			&>li:nth-child(3) {
				flex: initial;
				flex-grow: 0;
				flex-shrink: 0;
				width: calc(100% - 480px);
			}

			&>li:nth-child(1) {
				border-left: 1px solid #dfe6ec;
			}
		}
	}

	&>.contentList {
		width: 100%;
		margin-top: 40px;
		height: calc(100% - 43px);
		overflow: auto;

		&>.item {
			height: auto;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			overflow: hidden;
			font-size: 14px;
			color: #606266;

			&>.left {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #dfe6ec;
				border-top: none;
				text-align: center;

				&>.el-checkbox {
					margin: 0 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					height: auto !important;
					white-space: normal;
				}
			}

			&>.right {
				width: calc(100% - 240px);
				border-top: none;
				display: flex;
				flex-direction: column;

				&>.box {
					display: flex;
					border-bottom: 1px solid #dfe6ec;

					&>.menuList {
						display: flex;
						justify-content: left;
						align-items: center;
						width: 240px;
						box-sizing: border-box;
						padding: 10px;
						border-right: 1px solid #dfe6ec;

						&>.el-checkbox {
							display: flex;
							justify-content: center;
							align-items: center;
							height: auto !important;
							white-space: normal;
						}
					}

					&>.btnList {
						width: calc(100% - 240px);
						box-sizing: border-box;
						padding-top: 10px;
						border-right: 1px solid #dfe6ec;

						&>.el-checkbox.is-bordered.el-checkbox--medium {
							margin-left: 8px;
							margin-bottom: 10px;
							margin-right: 0px;
						}
					}

					&>.titleList {
						flex: 1;
						box-sizing: border-box;
						padding-top: 10px;
						border-right: 1px solid #dfe6ec;

						&>.el-checkbox.is-bordered.el-checkbox--medium {
							margin-left: 8px;
							margin-bottom: 10px;
						}
					}
				}
			}
		}
	}
}
</style>
